@import "variables"

$panel-font-size: 0.75rem


.sidebar
    background-color: $bg-white
    height: calc(100vh - 6.25rem)
    padding-top: 1.25rem
    padding-bottom: 1.25rem
    padding-left: 1.875rem
    padding-right: 1.5rem
    border-right:  1px solid #DEDEDE
    position: sticky
    top: 6.25rem
    z-index: 800
    overflow-y: auto
    overflow-x: hidden
    max-width: 18.5rem
    width: 18%
    min-width: 15.75rem

    .sidebar-panel + .sidebar-panel
        margin-top: 1.25rem


.sidebar-panel

    &-title
        font-size: 1rem
        font-weight: 600
        color: #1D1D1D
        margin: 0 0 0.5rem 0

    &-group
        display: flex
        flex-direction: column

        .sidebar-btn + .sidebar-btn
            margin-top: 0.5rem

        .sidebar-btn
            border-color: transparent
            height: 1.875rem
            padding: 0.375rem 0.25rem 0.375rem 0.75rem
            vertical-align: middle
            display: flex
            position: relative
            font-size: 0

            &:hover
                background-color: $bg-gray-light
                
            &:active,
            &:focus,
            &.active
                background-color: $bg-yellow-light


.form-inline
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;


.searchbox
    width: 12.5rem
    height: $searchbox-height
    border: 1px solid #000000
    background-color: transparent
    position: relative
    margin: 0;
    border-radius: 50vh;

    &-input,
    &-button
        background-color: transparent
        border: none

    &-input,
    &-input:focus,
    &-input:active
        width: 10rem
        height: $searchbox-height - 2px
        color: $font-black-normal
        font-size: 0.75rem
        padding-top: 0.15rem
        padding-bottom: 0.25rem
        padding-left: 0.625rem
        padding-right: 0
        outline: 0

    &-button
        background-image: url(../icon/mag.svg)
        background-repeat: no-repeat
        background-size: initial
        width: 17px
        height: 17px
        position: absolute
        z-index: 1
        transform: translateY(-50%);
        top: 50%
        right: 0.5rem


.scrollSpy-btn
    $border-radius: 0.1rem
    border-radius: $border-radius

    &-symbol
        content: ""
        width: 0.75rem
        height: 0.75rem
        border-radius: 50vh
        display: inline-block
        margin-left: 1px
        margin-right: 5px
        align-self: center
        flex-shrink: 0

    &.active &-stop
        content: ""
        position: absolute
        width: 0.5rem
        height: 100%
        top: 50%
        transform: translateY(-50%)
        right: 0
        background-color: $bg-red-normal
        border-top-right-radius: $border-radius
        border-top-left-radius: 0
        border-bottom-right-radius: $border-radius
        border-bottom-left-radius: 0

    &-text
        font-size: $panel-font-size
        color: $font-black-light
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis


.filter-btn
    border-radius: 50vh

    &-symbol
        content: ""
        background-image: url(../image/th4on.svg)
        width: 0.875rem
        height: 0.875rem
        border-radius: 0
        display: inline-block
        align-self: center
        margin-right: 4px
        flex-shrink: 0

    &-text
        font-size: $panel-font-size
        color: $font-black-normal
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis